import React, { useState, useEffect } from 'react';
import Chat from "../Chat/chat"
const BackToTopAndHelp = () => {
    // 控制返回顶部按钮是否显示的状态
    const [showBackToTop, setShowBackToTop] = useState(false);
    const [isHovered, setIsHovered] = useState(false);
    const [visible1, setVisible1] = useState(false);
    // 用于处理滚动事件，判断是否显示返回顶部按钮
    const handleScroll = () => {
        if (window.pageYOffset > 100) {
            setShowBackToTop(true);
        } else {
            setShowBackToTop(false);
        }
    };

    // 点击返回顶部按钮，让页面滚动到顶部
    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    };

    useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);
    // const Fhbtn = () => {
    //     divchat.style.display='block'
    // }
    return (
        <div>
            
            
            <div visible1={visible1} style={{ width: '300px', height: '470px',position:'fixed',top:'24rem',right:'3.5rem'}}>
                <button onClick={() => setVisible1(false)}>关闭</button>
                    <Chat />
                    
            </div>
            <div style={{ position: 'fixed', bottom: '20px', right: '20px', zIndex: 999 }}>
                {/* 返回顶部按钮 */}
                {showBackToTop && (
                    <button
                        style={{
                            padding: '10px 15px',
                            borderRadius: '5px',
                            border: 'none',
                            backgroundColor: 'lightgray',
                            cursor: 'pointer'
                        }}
                        onClick={scrollToTop}
                    >
                        返回顶部
                    </button>
                )}
                {/* 右下角问号按钮（这里简单示意，可添加点击事件等做更多功能） */}
                <div
                    onMouseEnter={() => setIsHovered(false)}
                   
                    style={{
                        padding: '10px 15px',
                        borderRadius: '5px',
                        border: 'none',
                        backgroundColor: 'lightgray',
                        cursor: 'pointer',
                        marginLeft: '10px'
                    }}>
                    ?
                    {isHovered && (
                        <div
                            style={{
                                marginTop: '10px',
                                position: 'absolute',
                                left: '40px', // 控制显示位置
                                bottom: '20px'
                            }}
                        >
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default BackToTopAndHelp;